Synlighet
Synlighet är en viktig del av webbdesign. En grundläggande regel är att text och bakgrund måste ha hög kontrast så att innehållet blir lätt att läsa för alla användare. Detta gäller även text på bilder, bakgrunds gradienter, knappar och andra element på sidan (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”). Däremot gäller kravet normalt inte logotyper eller tillfällig text som råkar finnas i en bild. Färger bör också användas på ett genomtänkt sätt. Till exempel används röd färg ofta för att visa att ett fält måste fyllas i, ibland tillsammans med en stjärna (*) (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”). Det är dock viktigt att inte bara använda färg för att förmedla information, eftersom färgblinda användare annars kan få svårt att förstå innehållet.
Navigering
En webbplats bör också vara tydlig och enkel att navigera. Klickbara element, som länkar och knappar, bör ha en tydlig stil så att användaren direkt kan se att det går att trycka på (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”). Navigationen ska fungera och se likadan ut på hela webbplatsen för att skapa en konsekvent upplevelse. (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”) I formulär är det viktigt att alla fält har tydliga beskrivningar i så kallade “label”-element. Dessa placeras vanligtvis ovanför eller till vänster om formulärfältet, medan etiketten för kryssrutor ofta placeras till höger om rutan. Dessutom bör användaren få tydlig feedback om något går fel, till exempel om en e-postadress skrivs i fel format (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”).
Responsive web design
Slutligen är det viktigt att webbplatsen är responsiv och fungerar på olika skärmstorlekar, som mobiltelefoner, surfplattor och datorer. På mindre skärmar är det vanligt att huvudmenyn omvandlas till en så kallad hamburgermeny för att spara plats (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”). Element som ligger bredvid varandra på större skärmar kan också placeras under varandra på mindre skärmar för att göra innehållet lättare att läsa och använda. Dessutom bör det finnas tillräckligt med utrymme runt bilder så att texten bredvid dem blir tydlig och lätt att uppfatta (“Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI)”).
Sammanfattning
Texten och bakgrunden måste ha hög kontrast, annars kan vissa människor ha svårt att läsa texten. Detta inkluderar text på bilder, bakgrunds gradienter, knappar och andra element. Det inkluderar dock inte loggor, eller tillfällig text, såsom text som råkar vara i en bild. Använd färger rätt. Röda färger betyder ofta att man måste skriva in något i det fältet. Ibland finns också * för att visa detta. Visa med färger och text så att färgblinda också kan använda sig av sidan. Ändra textstilen för element som är klickbara, såsom länkar och knappar, så att de är enkla att identifiera. Se till att navigationen fungerar och ser likadant ut runt hela sidan. Detta gör det enkelt för användaren att navigera runt sidan.
Se till att alla fält i ett formulär har en bra beskrivning i “label”-elementet. Detta element ska också vara över fältet till vänster. Förutom med kryssrutor där de är till höger av rutan. Visa tydlig feedback när något går fel på sidan, till exempel om mejlen är fel eller liknande. Då ska det visas tydligt för användaren. Ha mycket rum runt bilder så att det är enklare att se texten bredvid bilden. Se till att sidan fungerar på olika skärmstorlekar, såsom mobil, dator och liknande. Ändra huvudmenyn till en hamburgermeny på mindre skärmar. Lägg element under varandra istället för bredvid varandra på mindre skärmar.
